<template>
  <div class="container" ref="containerRef"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

//导入hdr图像加载器
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader"; //rebe加载器

//加载hdr组件
import BOLLROOM from "../assets/house01.hdr";

// import BOLLROOM from '../assets/redhouse.hdr'

// 初始化场景
const scene = new THREE.Scene();

// 初始化 透视 相机  参数1 视角  屏幕宽高比  近端  远端
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
// 设置相机位置
camera.position.z = 0.1;

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

const containerRef = ref(null);
const render = () => {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
};

// 添加球
const geometry = new THREE.SphereGeometry(5, 32, 32);
const loader = new RGBELoader();

//异步加载 hdr组件
loader.loadAsync(BOLLROOM).then((texture) => {
  const material = new THREE.MeshBasicMaterial({ map: texture });
  const sphere = new THREE.Mesh(geometry, material);
  sphere.geometry.scale(1, 1, -1); // 反转过来  本来是图片包裹在球上的
  scene.add(sphere);
});

// 挂载完毕 获取dom
onMounted(() => {
  // 添加控制器
  const contros = new OrbitControls(camera, containerRef.value);
  contros.enableDamping = true;
  containerRef.value.appendChild(renderer.domElement);
  render();
});
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.container {
  width: 100vw;
  height: 100vh;
  background-color: #f0f0f0;
}
</style>
